Utforska kraften i CSS Custom Highlight API för avancerad hantering av textval. LÀr dig skapa anpassade markeringsstilar, hantera flera omrÄden och bygg dynamiska anvÀndargrÀnssnitt med oövertrÀffad flexibilitet.
CSS Custom Highlight API: Att BemÀstra Textval med Flera OmrÄden för Dynamiska AnvÀndargrÀnssnitt
CSS Custom Highlight API Àr ett kraftfullt nytt verktyg för webbutvecklare som möjliggör oövertrÀffad kontroll över textval och markering i webbapplikationer. Till skillnad frÄn de grundlÀggande webblÀsarvalfunktionerna, gör detta API det möjligt för utvecklare att definiera anpassade markeringsstilar och hantera flera urvalsomrÄden programmatiskt. Detta öppnar upp en vÀrld av möjligheter för att skapa rika, interaktiva och tillgÀngliga anvÀndargrÀnssnitt. Denna guide ger en omfattande översikt över API:et, utforskar dess möjligheter, anvÀndningsfall och implementeringsdetaljer, allt med ett globalt perspektiv.
FörstÄ grunderna i CSS Custom Highlight API
Innan du dyker in i komplexa scenarier Àr det viktigt att förstÄ de grundlÀggande koncepten i API:et. KÀrnan i det introducerar CSS Custom Highlight API flera nya CSS pseudo-element, inklusive:
::selection: Representerar den del av ett dokument som har valts av anvÀndaren. Detta har funnits lÀnge och tillÄter grundlÀggande stilmallar för textval.::highlight: Ett mer generellt pseudo-element för att tillÀmpa stilar pÄ markerade omrÄden. Detta Àr nyckeln till det nya API:ets kraft. Du kan nu skapa namngivna markeringar och tillÀmpa anpassad stil pÄ var och en.::target-text: Representerar den del av ett dokument som Àr riktat av en URI-fragment (t.ex.#section-title). Det gör att du kan styla den del av sidan som anvÀndaren rullade till via en lÀnk.::spelling-error: Representerar text som identifierats av anvÀndaragenten som innehÄller stavfel. Erbjuder stilkontroll över stavfelindikatorer.::grammar-error: Representerar text som identifierats av anvÀndaragenten som innehÄller grammatiska fel. Erbjuder stilkontroll över grammatikfelindikatorer.
::highlight pseudo-elementet Àr API:ets arbetshÀst. Det lÄter dig definiera namngivna markeringar i CSS och sedan tillÀmpa dessa markeringar pÄ specifika textomrÄden med hjÀlp av JavaScript.
Nyckelbegrepp: OmrÄden och Markeringar
API:et kretsar kring begreppen omrÄden och markeringar:
- OmrÄde: En sammanhÀngande textsektion i dokumentet. Representeras av
Range-objektet i JavaScript. - Markering: En namngiven stil som tillÀmpas pÄ ett eller flera omrÄden. Definieras i CSS med hjÀlp av
::highlight(highlight-name)pseudo-elementet och manipuleras viaHighlightochHighlightRegistryAPI:erna i JavaScript.
TÀnk pÄ det sÄ hÀr: ett omrÄde Àr 'vadet' (texten du vill markera), och markeringen Àr 'hur' (stilen du vill tillÀmpa).
StÀlla in anpassade markeringar med CSS
Det första steget Àr att definiera dina anpassade markeringsstilar i CSS. Du gör detta med ::highlight() pseudo-elementet.
::highlight(search-result) {
background-color: yellow;
color: black;
}
::highlight(important-term) {
background-color: lightblue;
font-weight: bold;
}
I det hÀr exemplet har vi definierat tvÄ anpassade markeringsstilar: search-result och important-term. search-result-markeringen kommer att applicera en gul bakgrund med svart text, medan important-term-markeringen kommer att anvÀnda en ljusblÄ bakgrund och fet stil pÄ texten. Du kan definiera alla CSS-egenskaper du vill ha inom dessa markeringsstilar.
Hantera markeringar med JavaScript
NÀr du har definierat dina markeringsstilar i CSS kan du anvÀnda JavaScript för att tillÀmpa dem pÄ specifika textomrÄden. Highlight och HighlightRegistry API:erna tillhandahÄller verktygen för detta.
The HighlightRegistry
HighlightRegistry Àr ett globalt objekt som hanterar alla markeringar i dokumentet. Du kan komma Ät det via CSS-grÀnssnittet:
const highlightRegistry = CSS.highlights;
Skapa markeringar
För att skapa en markering anvÀnder du Highlight-konstruktorn:
const highlight = new Highlight();
Initialt har en markering inga omrÄden associerade med sig. Du mÄste lÀgga till omrÄden i markeringen med metoden addRange().
LÀgga till omrÄden i en markering
För att lÀgga till ett omrÄde i en markering mÄste du först skapa ett Range-objekt. Du kan göra detta med hjÀlp av metoden document.createRange():
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
highlight.addRange(range);
Var:
startNode: DOM-noden dÀr omrÄdet börjar.startOffset: Teckenförskjutningen inomstartNodedÀr omrÄdet börjar.endNode: DOM-noden dÀr omrÄdet slutar.endOffset: Teckenförskjutningen inomendNodedÀr omrÄdet slutar.
Exempel: Markera sökresultat
LÄt oss sÀga att du har ett textblock och du vill markera alla förekomster av en sökterm. SÄ hÀr kan du göra det:
function highlightSearchResults(searchTerm, element) {
const text = element.textContent;
let index = text.indexOf(searchTerm);
if (index === -1) {
return; // Söktermen hittades inte
}
const highlight = new Highlight();
while (index !== -1) {
const range = document.createRange();
range.setStart(element.firstChild, index);
range.setEnd(element.firstChild, index + searchTerm.length);
highlight.addRange(range);
index = text.indexOf(searchTerm, index + 1);
}
// TillÀmpa 'search-result' markeringsstil
highlightRegistry.set('search-result', highlight);
}
const contentElement = document.getElementById('content');
highlightSearchResults('example', contentElement);
Denna kodsnutt hittar alla förekomster av ordet "example" i elementet med ID "content" och tillÀmpar search-result markeringsstilen pÄ dem.
Ta bort omrÄden och markeringar
Du kan ta bort omrÄden frÄn en markering med metoden deleteRange():
highlight.deleteRange(range);
Du kan ocksÄ ta bort alla omrÄden frÄn en markering med metoden clear():
highlight.clear();
För att ta bort en markering helt och hÄllet kan du anvÀnda metoden delete() i HighlightRegistry:
highlightRegistry.delete('search-result');
Avancerade anvÀndningsfall och övervÀganden
CSS Custom Highlight API Àr ett kraftfullt verktyg som kan anvÀndas i en mÀngd avancerade scenarier.
Samarbetsredigering
I samarbetsredigeringsapplikationer kan du anvÀnda API:et för att markera de Àndringar som gjorts av olika anvÀndare. Varje anvÀndare kan ha sin egen anpassade markeringsstil, sÄ att du enkelt kan se vem som gjort vilka Àndringar. Till exempel kan en gemensam dokumentredigerare som anvÀnds av team i flera lÀnder anvÀnda olika markeringsfÀrger för att representera redigeringar frÄn teammedlemmar i Japan, Tyskland och Brasilien.
Kodredigerare
Kodredigerare kan utnyttja API:et för syntaxmarkering. Olika syntaxelement (t.ex. nyckelord, operatorer, kommentarer) kan tilldelas olika markeringsstilar. Moderna kodredigerare har ofta komplexa syntaxmarkeringsregler, och detta API möjliggör mer exakt och anpassningsbar kontroll Àn traditionella metoder.
TillgÀnglighet
API:et kan anvÀndas för att förbÀttra tillgÀngligheten. Du kan till exempel markera det aktuella fokuselementet eller den text som lÀses upp av en skÀrmlÀsare. Kom ihÄg att sÀkerstÀlla tillrÀcklig fÀrgkontrast mellan markeringsbakgrunden och textfÀrgen för anvÀndare med synnedsÀttningar. WCAG (Web Content Accessibility Guidelines) ger specifika riktlinjer för fÀrgkontrastförhÄllanden.
Internationaliserings (i18n) övervÀganden
NÀr du anvÀnder API:et i flersprÄkiga applikationer, tÀnk pÄ följande:
- Textriktning: Se till att dina markeringsstilar fungerar korrekt med bÄde vÀnster-till-höger (LTR) och höger-till-vÀnster (RTL) sprÄk.
- OrdbegrÀnsningar: Olika sprÄk har olika regler för ordbegrÀnsningar. Var noga med att anvÀnda lÀmpliga algoritmer för ordbegrÀnsningsdetektering nÀr du markerar ord eller fraser.
- TeckenuppsÀttningar: API:et stöder Unicode, sÄ du kan markera text pÄ vilket sprÄk som helst.
Till exempel, nÀr du markerar söktermer pÄ arabiska (ett RTL-sprÄk), se till att markeringen visuellt Äterspeglar korrekt textriktning. PÄ samma sÀtt, nÀr du markerar nyckelord pÄ japanska, som inte anvÀnder mellanslag mellan ord, mÄste du anvÀnda lÀmplig morfologisk analys för att identifiera ordbegrÀnsningar.
PrestandaövervÀganden
Ăven om API:et Ă€r kraftfullt Ă€r det viktigt att tĂ€nka pĂ„ prestanda. Att skapa och hantera ett stort antal markeringar kan pĂ„verka prestandan, sĂ€rskilt i stora dokument. TĂ€nk pĂ„ dessa tips:
- Optimera skapandet av omrÄden: Att skapa
Range-objekt kan vara dyrt. à teranvÀnd befintliga omrÄden nÀr det Àr möjligt. - Batchuppdateringar: NÀr du gör flera Àndringar av markeringar, samla dem i en enda uppdatering för att minimera omflöden.
- Lat laddning: Markera endast den text som för nÀrvarande Àr synlig för anvÀndaren. Ladda ytterligare markeringar nÀr anvÀndaren rullar.
- Virtualisering: För mycket stora dokument, övervÀg att anvÀnda virtualiseringstekniker för att endast rendera den synliga delen av dokumentet.
Praktiska exempel och kodavsnitt
Exempel 1: Dynamisk nyckelordsmarkering
Det hÀr exemplet visar hur man dynamiskt markerar nyckelord i en text baserat pÄ anvÀndarens inmatning. FörestÀll dig att en anvÀndare skriver en sökfrÄga i en sökruta; de markerade nyckelorden uppdateras i realtid.
Detta Àr exempeltext. Den innehÄller nyckelord som vi vill markera. Vi kommer att markera nyckelorden baserat pÄ anvÀndarens inmatning.
const keywordInput = document.getElementById('keyword-input');
const textContainer = document.getElementById('text-container');
keywordInput.addEventListener('input', () => {
const keyword = keywordInput.value.trim();
if (keyword) {
highlightKeyword(keyword, textContainer);
} else {
clearHighlights(textContainer);
}
});
function highlightKeyword(keyword, element) {
clearHighlights(element);
const text = element.textContent;
let index = text.indexOf(keyword);
if (index === -1) {
return;
}
const highlight = new Highlight();
while (index !== -1) {
const range = document.createRange();
range.setStart(element.firstChild, index);
range.setEnd(element.firstChild, index + keyword.length);
highlight.addRange(range);
index = text.indexOf(keyword, index + 1);
}
CSS.highlights.set('dynamic-keyword', highlight);
}
function clearHighlights(element) {
CSS.highlights.delete('dynamic-keyword');
}
::highlight(dynamic-keyword) {
background-color: rgba(255, 165, 0, 0.5); /* Halvtransparent orange */
color: black;
}
Exempel 2: Implementera en "Hitta alla"-funktion
Det hÀr exemplet simulerar en "Hitta alla"-funktion, liknande de som finns i textredigerare och IDE:er. Alla förekomster av en sökterm markeras samtidigt.
Detta dokument innehÄller flera instanser av söktermen. Söktermen kommer att markeras i hela dokumentet.
Detta Àr en andra instans av söktermen. HÀr Àr en annan sökterm.
const searchTermInput = document.getElementById('search-term');
const documentContent = document.getElementById('document-content');
searchTermInput.addEventListener('input', () => {
const searchTerm = searchTermInput.value.trim();
if (searchTerm) {
findAll(searchTerm, documentContent);
} else {
clearFindAllHighlights(documentContent);
}
});
function findAll(searchTerm, element) {
clearFindAllHighlights(element);
const text = element.textContent;
let index = text.indexOf(searchTerm);
const highlight = new Highlight();
while (index !== -1) {
const range = document.createRange();
range.setStart(element.firstChild, index);
range.setEnd(element.firstChild, index + searchTerm.length);
highlight.addRange(range);
index = text.indexOf(searchTerm, index + 1);
}
CSS.highlights.set('find-all', highlight);
}
function clearFindAllHighlights(element) {
CSS.highlights.delete('find-all');
}
::highlight(find-all) {
background-color: #90EE90; /* LightGreen */
color: black;
}
WebblÀsarkompatibilitet och polyfyller
CSS Custom Highlight API Àr en relativt ny funktion, sÄ webblÀsarkompatibiliteten kan variera. FrÄn och med slutet av 2024 har den bra stöd i moderna webblÀsare som Chrome, Firefox, Safari och Edge. Det Àr dock viktigt att kontrollera de senaste webblÀsarkompatibilitetsdata pÄ webbplatser som "Can I use..." för att sÀkerstÀlla att din mÄlgrupp kan anvÀnda dina funktioner. Om du behöver stödja Àldre webblÀsare, kan du utforska polyfyller eller alternativa metoder som efterliknar API:ets funktionalitet, Àven om de kanske inte erbjuder samma prestanda eller kvalitet.
Textvals och markerings framtid
CSS Custom Highlight API representerar ett betydande steg framÄt i webbutveckling och ger utvecklare finare kontroll över textval och markering. NÀr API:et mognar och webblÀsarstödet förbÀttras kan vi förvÀnta oss att se Ànnu mer innovativa anvÀndningsomrÄden för denna teknik. FrÄn avancerade textredigerare till samarbetande dokumentplattformar Àr möjligheterna oÀndliga. Detta API möjliggör en rikare, mer interaktiv och mer tillgÀnglig anvÀndarupplevelse. TÀnk pÄ hur detta kan anvÀndas för att förbÀttra anvÀndarupplevelser i allt frÄn internationella nyhetssajter till onlineplattformar för sprÄkinlÀrning.
Slutsats
CSS Custom Highlight API Àr ett kraftfullt verktyg för att skapa dynamiska och interaktiva anvÀndargrÀnssnitt. Genom att förstÄ grundlÀggande koncept för omrÄden, markeringar och HighlightRegistry kan du utnyttja detta API för att bygga övertygande anvÀndarupplevelser som tidigare var svÄra eller omöjliga att uppnÄ. NÀr du utforskar detta API, kom ihÄg att övervÀga tillgÀnglighet, internationalisering och prestanda för att sÀkerstÀlla att dina applikationer Àr anvÀndbara och prestandafyllda för en global publik. Med sin flexibilitet och kontroll Àr CSS Custom Highlight API redo att bli en viktig del av den moderna webbutvecklarens verktygslÄda.